<?php
	header("Content-Type: text/html;charset=utf-8");
	include("function/_nosql.php"); //
	include("function/function.php");
	include("_include.user.judge.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会员中心</title>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/sq.css"/>
<script type="text/javascript" src="js/baidutongji.js"></script>
<script type="text/javascript" src="js/laydate/laydate.js"></script>
</head>
<body>
    <!--top-bar begin-->
	<? include("_include.top.topbar.php") ?>
    <!--top-bar end-->
    <!--banner begin-->
    <? include("_include.user.topbar.php")?>
    <!--banner end-->
    <!--member center-->
    <div class="member-box">
        <div class="content">
			<? include("_include.user.leftnav.php") ?>
            <div class="member-box-r">
                <div class="member-item1">
                    <div class="m-title">基本资料</div>
                    <?php include_once('_include.user.ordersearch.php');?>
                </div>
                <div class="member-basic">
                    <div class="photo-upload-box">
                        <div class="new-upload-hd">
                            <div class="new-contentarea tc">
                                <a href="javascript:void(0)" class="upload-img">
                                    <label for="upload-file">选择图片</label>
                                </a>
                                <input type="file" class="" name="upload-file" id="upload-file">
								<input type="hidden" name="BaseImgCode" value="" class="BaseImgCode" />
                            </div>
                            <p class="tips">添加一张美图作为您的头像，让自己更具吸引力（建议图片尺寸：85PX * 85PX）</p>
                        </div>
                        <div class="new-upload-bd">
                            <div class="new-pic-l">
                                <div class="title">头像裁剪</div>
                                <div class="imageBox">
                                    <div class="thumbBox"></div>
                                    <div class="spinner" style="display: none">Loading...</div>
                                </div>
                            </div>
                            <div class="new-pic-c">
                                <a href="javascript:;" id="btnCrop" class="Btnsty_peyton">上传并预览</a>
                            </div>
                            <div class="new-pic-r">
                                <div class="title">头像预览</div>
                                <div class="cropped"></div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="upload-option"><a href="javascript:void(0);" class="option option-new updateHead">更新头像</a><a href="user_face.php" class="option option-reset">重设头像</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--member center-->
    <!--foot begin-->
	<? include("_include.bottom.footbar.php") ?>
    <!--foot begin-->
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/sq.js"></script>
    <script type="text/javascript" src="js/cropbox.js"></script>
	<script language="javascript">
		var options =
			{
				thumbBox: '.thumbBox',
				spinner: '.spinner',
				imgSrc: '<?=$user_face?>'
			}
			var cropper = $('.imageBox').cropbox(options);
			$('#upload-file').on('change', function(){
				var reader = new FileReader();
				reader.onload = function(e) {
					options.imgSrc = e.target.result;
					cropper = $('.imageBox').cropbox(options);
				}
				reader.readAsDataURL(this.files[0]);
				this.files = [];
			})
			$('#btnCrop').on('click', function(){
				var isBgImg = $(".imageBox").attr("style");
				if(isBgImg != null){
					var img = cropper.getDataURL();
					$('.cropped').html('');
					$('.BaseImgCode').val(img);
					$('.cropped').append('<img src="'+img+'" align="absmiddle" style="">');
				}else{
					alert('请先上传图片');
				}
			})
			$('.updateHead').on('click', function(){
				var BaseImgCode = $('.BaseImgCode').val();
				if(BaseImgCode){
					$.ajax({ 
						url:'user_faceaddsave.php', 
						type:'post',
						dataType:'html',
						data:{action:"edit",BaseImgCode:BaseImgCode,date:new Date()},
						error: function(){
							alert('Error loading document'); 
						},success: function(msg){
							alert(msg);
						} 
					}); 
				}else{
					alert('请先生成图片');
				}
			})
			
			$('#btnZoomIn').on('click', function(){
				cropper.zoomIn();
			})
			$('#btnZoomOut').on('click', function(){
				cropper.zoomOut();
			})
		</script>
</body>
</html>

